<template>
    <div :style="'opacity:' + opacity">
        <!--<el-image id="myimg" style="width: 100%; height: 100%" :src="url" />-->
        <img :src="url" />
    </div>
</template>
     
<script lang="ts" setup>

const props = defineProps({
    imgArr: {
        type: Array<string>,
        default: null
    },
    loop: {
        type: Number,
        default: 0
    },
    opacityInTime: {//是否渐入，单位：毫秒
        type: Number,
        default: 0
    },
    opacityOutTime: {//是否渐出，单位：毫秒
        type: Number,
        default: 0
    }
});


import { ref, onMounted, watch } from 'vue';
    
const url = ref('');
const opacity = ref(1);
var curFrame:number = 0;
var count:number = 0;
let opacityTime:number = props.opacityInTime;

onMounted(() => {
    // console.log("动画显示了一次。")
    opacityTime = props.opacityInTime;

    if(props.imgArr){
        // renderFrame();
        setInterval(renderFrame, 33.33);
        // setTimeout(() => {
        //     renderFrame();
        // }, 2000);
    }
});


function renderFrame(){
    var arr = props.imgArr;
    if(curFrame >= arr.length){
        curFrame = 0;
    }
    // if(count > 33.3){
        count = 0;
        url.value = arr[curFrame];
        // let img:any = document.getElementById("myimg");
        // img.src = arr[curFrame];
        curFrame ++;
    // }
    count ++;
    // requestAnimationFrame(renderFrame);

    if(props.opacityInTime > 0 && opacityTime > 0){
        var rate = 1 - opacityTime / props.opacityInTime;
        opacity.value = rate;
        opacityTime -= 33.33;
        if(opacityTime < 0){
            opacityTime = 0;
        }
    }
}

</script>
    
<style scoped>

.ctn{
    display: flex;
    flex-direction: row;
    position:absolute;
}

</style>